<template>
  <div class="exceldata vH flex-column">
    <el-row class="main">
      <el-table
        ref="table"
        v-loading="page.loading"
        border
        :data="tableData"
        stripe
        row-key="AUTOID"
        height="100%"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="errormsg" width="250" label="验证信息">
          <template slot-scope="scope">
            <!-- 如果没有显示加载 -->
            <el-tag v-if="!scope.row.errormsg" type="warning">
              <i class="el-icon-loading"></i>
            </el-tag>
            <!-- 如果是1显示成功 -->
            <el-tag v-else-if="scope.row.errormsg == '1'" type="success">
              <i class="el-icon-check"></i>
            </el-tag>
            <!-- 显示详细错误 -->
            <template v-else-if="page.showerror">
              <el-tag
                v-for="(item, index) in scope.row.errormsg.split(';')"
                :key="index"
                type="warning"
                >{{ item }}
              </el-tag>
            </template>
            <!-- 收起显示详细错误 -->
            <template v-else-if="!page.showerror">
              <el-progress
                style="width:120px;display:inline-block"
                :percentage="
                  Math.floor(
                    (1 -
                      scope.row.errormsg.split(';').length /
                        assetA1Cols.length) *
                      100
                  )
                "
                color="#67c23a"
              ></el-progress>
              <el-popover placement="right" width="400" trigger="hover">
                <el-tag
                  v-for="(item, index) in scope.row.errormsg.split(';')"
                  :key="index"
                  type="warning"
                  >{{ item }}
                </el-tag>
                <el-tag type="warning" slot="reference">
                  {{ scope.row.errormsg.split(";").length }}个错误
                </el-tag>
              </el-popover>
            </template>
          </template>
        </el-table-column>
        <template v-for="item in assetA1Cols">
          <el-table-column
            :key="item.AUTOID"
            :prop="item.DataField"
            :width="item.Width"
            :label="item.HeaderText"
          >
            <!-- 列头 -->
            <template slot="header" slot-scope="scope">
              {{ scope.column.label }}
              <template v-if="page.errorCol.includes(item.HeaderText)">
                <i
                  style="color:red"
                  class="el-icon-warning-outline"
                  slot="reference"
                ></i>
              </template>
            </template>
            <!-- 内容 -->
            <template slot-scope="scope">
              <!-- 系统编号 -->
              <template v-if="item.DataField == '系统资产编号'">
                <el-tag v-if="scope.row.includes">
                  编号已存在
                </el-tag>
                <el-tag v-else>
                  新增
                </el-tag>
              </template>
              {{ scope.row[item.DataField] }}
              <!-- 如果有错误 显示 感叹号 -->
              <template
                v-if="
                  scope.row.errormsg &&
                    scope.row.errorCol.includes(item.HeaderText)
                "
              >
                <el-popover placement="right" width="400" trigger="hover">
                  <el-tag
                    v-for="(item, index) in scope.row.errormsg
                      .split(';')
                      .filter(
                        msg => msg && msg.includes(`【${scope.column.label}】`)
                      )"
                    :key="index"
                    type="warning"
                    >{{ item }}
                  </el-tag>
                  <i
                    style="color:red"
                    class="el-icon-warning"
                    slot="reference"
                  ></i>
                </el-popover>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-row>
    <el-row class="foot tree_top_border">
      <div>
        <el-switch
          v-model="page.showerror"
          active-text="显示错误信息"
        ></el-switch>
      </div>
      <mei-pagination
        style="flex:1"
        :pageTotal="this.excelData.length"
        v-model="page.paginations"
      >
      </mei-pagination>
    </el-row>
  </div>
</template>

<script>
import { AssetA1 } from "@/api";
import { isArray, isArrayEmpty } from "@/utils/validate";
export default {
  data() {
    return {
      //页面控制
      page: {
        loading: false,
        paginations: {},
        showerror: true,
        errorCol: []
      },
      //数据
      data: {
        //系统列
        sysAssetA1Data: []
      }
    };
  },
  inject: ["A1List"],
  //外部属性
  props: {
    //选择的列
    excelCol: {
      type: Object,
      default() {
        return {};
      }
    },
    //数据
    excelData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  //内部方法
  methods: {
    initPage() {
      this.data.sysAssetA1Data = [...this.A1List.data.sysAssetA1Data];
      this.excelData.forEach(item => {
        item.errormsg = "";
      });
    },
    //得到数据 将[{中文:值},{中文:值}] => [{sysAssetA1_160:值}]
    getExcelData() {
      const _data = this.excelData.map(item => {
        //{中文:值}
        let row = {};
        Object.keys(item).forEach(key => {
          let a1 = this.assetA1Cols.find(a1 => {
            return a1.DataField == key;
          });
          if (a1 && a1.SYS_ASSET_A1_160) {
            let newkey = a1.SYS_ASSET_A1_160;
            if (
              a1.SYS_ASSET_A1_60 &&
              a1.SYS_ASSET_A1_70 &&
              a1.SYS_ASSET_A1_80
            ) {
              newkey = "str" + newkey;
            }
            Object.assign(row, {
              [newkey]: item[key]
            });
          }
        });
        return row;
      });
      return _data;
    },
    async checkData() {
      //得到数据
      const excel = this.getExcelData();
      //固定字段30 的列名
      const idfield = this.data.sysAssetA1Data.find(
        a1 => a1.SYS_ASSET_A1_160 == "ASSET_A1_30"
      ).SYS_ASSET_A1_50;
      //错误的列
      let _errorCol = new Set();
      //后台验证
      const res = await AssetA1.CheckData(excel);
      //循环结果
      for (let i = 0; i < res.length; i++) {
        const element = res[i];
        const index = this.excelData.findIndex(
          data => data[idfield] == element.id
        );
        let row = this.excelData[index];
        row.errormsg = element.msg; //信息
        row.includes = element.includes; //是否存在
        row.errorCol = element.errCol; //错误的列
        this.$set(this.excelData, index, row);
        row.errorCol &&
          row.errorCol.forEach(e => {
            _errorCol.add(e);
          });
      }
      this.page.errorCol = Array.from(_errorCol);
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    //分页后的数据
    tableData() {
      let _data = [];
      const { index = 1, size = 10 } = this.page.paginations;
      _data = this.excelData.slice((index - 1) * size, size * index);
      return _data;
    },
    //计算显示的列
    assetA1Cols() {
      let _data = [];
      this.data.sysAssetA1Data.forEach(item => {
        //添加属性
        let _item = Object.assign(
          { ...item },
          {
            HeaderText: item.SYS_ASSET_A1_50, //标题
            DataField: item.SYS_ASSET_A1_160, //字段名
            Width: item.SYS_ASSET_A1_20 //宽度
          }
        );
        if (this.excelCol) {
          if (
            Object.keys(this.excelCol).includes(item.HeaderText) &&
            this.excelCol[item.HeaderText]
          ) {
            _item.DataField = this.excelCol[item.HeaderText];
            _data.push(_item);
          }
        }
      });
      return _data;
    }
  },
  //监视
  watch: {
    //对照列改变时 刷新布局
    excelCol(val) {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },

    //列改变时 获得数据 提交后台验证
    assetA1Cols(val) {
      if (val.length != 0) {
        this.checkData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.foot {
  display: flex;
}
</style>
